<template>
	<view :class="[isCover?'order-log,cover':'order-log']">
		<view class="info-card">
			<view class="info">
				预约信息
			</view>
			<view class="name">
				{{ info.username}}
			</view>
			<view class="time">
				<text class="iconfont icon-time"></text>
				<text>{{ dateTime }}</text>
				<text class="btn" @click="goEditTime">更改时段</text>
			</view>
		</view>
		<view class="cards">
			<view class="tip">请你填写资料，带*号为必填项</view>
			<view class="item-row"><text class="type">姓名：</text><input type="text" placeholder="请输入姓名" v-model="formData.username"></view>
			<view class="item-row"><text class="type">手机号：</text><input type="text" placeholder="请输入手机号" v-model="formData.phone"></view>
			<view class="item-row"><text class="type">家庭地址：</text><input type="text" placeholder="请输入家庭地址" v-model="formData.address"></view>
			<view class="item-row"><text class="type">户型面积：</text><input type="text" placeholder="请输入户型面积" v-model="formData.area"></view>
			<button @click="isCover=true">提交预约</button>
		</view>
		
		<ConfirmDialog @cancelBack="cancelBack" @confirmOk="confirmOk" v-if="isCover" title="请核对填写的信息" cancel="返回修改" confirm="确认提交">
			<view class="dialog">
				<view class="item-one"><text class="type">姓名：</text>{{ formData.username}}</view>
				<view class="item-one"><text class="type">手机号：</text>{{ formData.phone}}</view>
				<view class="item-one"><text class="type">家庭地址：</text>{{ formData.address}}</view>
				<view class="item-one"><text class="type">户型面积：</text>{{ formData.area}}</view>
			</view>
		</ConfirmDialog>
	</view>
</template>

<script>
	import { SubmitOrder } from '../../api/index.js'
	export default {
		data() {
			return {
				show:true,
				msgType:'success',
				isCover:false,
				dateTime:'',
				time:'',
				date:'',
				phone:'',
				currentIndex:-1,
				currentIndexs:-1,
				info:{},
				formData:{
					username:'',
					phone:'',
					address:'',
					area:''
				}
			};
		},
		onLoad(options) {
			console.log(options)
			if(options.date){
				let datetime = JSON.parse(options.date)
				console.log(this.dateTime,'fd',datetime)
				this.dateTime = datetime.dt+' '+options.time
				this.date = datetime.dt
				this.time = options.time
				// this.phone = options.phone
				this.currentIndex = options.currentIndex
				this.currentIndexs = options.currentIndexs
				
			}
			if(options.info){
				this.info = JSON.parse(options.info)
				console.log(this.info,'fff')
			}
		},
		methods:{
			goEditTime(){
				let infos = JSON.stringify(this.info)
				uni.navigateTo({
					url:`/subPackage/PreOrderInfo/PreOrderInfo?info=${infos}&&currentIndex=${this.currentIndex}&&currentIndexs=${this.currentIndexs}`
				})
			},
			cancelBack(){
				
				this.isCover = false
				console.log('111',this.isCover)
				
			},
			confirmOk(){
				this.isCover = false
				console.log('111222',this.isCover)
				this.submit()
			},
			// 提交
			async submit(){
				this.isCover = false
				let data = {
					date:this.date,
					time:this.time,
					hid:this.info.id
				}
				let datas = Object.assign(this.formData,data)
				console.log(datas,'dddd')
				const { data:res } = await SubmitOrder(datas)
				console.log(res,'submit')
			}
		
			

		}
	}
</script>

<style lang="scss">
.order-log{
	width: 100%;
	height: 100%;
	padding: 20rpx;
	box-sizing: border-box;
	z-index: 0;

	&.cover{
		width: 100%;
		// height: 100vh;
		background: rgba(0, 0, 0, 0.2);
		z-index: 0;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
	}
	.info-card{
		background: #fff;
		line-height: 60rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		.info{
			text-align: center;
			font-weight: bold;
		}
		
		
		.name{
			font-weight: bold;
		}
		.time{
			font-weight: bold;
			.iconfont{
				font-weight: normal;
				margin-right: 8rpx;
			}
			.btn{
				margin-left: 50rpx;
				color: gold;
				background: orange;
				padding: 4rpx 10rpx;
				border-radius: 8rpx;
			}
		}
		
	}
	.cards{
		background: #fff;
		margin-top: 40rpx;
		border-radius: 10rpx;
		padding-bottom: 20rpx;
		.tip{
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #eee;
			margin-bottom: 20rpx;
		}
		.item-row{
			line-height: 60rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			.type{
				font-weight: bold;
			}
		}
		button{
			width: 60%;
			font-size: 30rpx;
			color: #fff;
			background: #1afa29;
			margin: 40rpx auto;
		}
	}
	.dialog{
		width: 100%;
		// height: 200rpx;
		// border: 1px solid #000;
		padding: 20rpx;
		box-sizing: border-box;
		// text-align: center;
		margin: 0 auto;
		.item-one{
			line-height: 60rpx;
			padding: 0 8rpx;
			margin: 0 4rpx;
			&:nth-child(odd){
				background-color: #f5f5f5;
				
			}
			.type{
				font-weight: bold;
			}
		}
	}
}

</style>
